<template>
	<view class="recipe-game-container">
		<view class="game-header">
			<view class="back-btn" @tap="goBack">
				<text class="iconfont icon-back"></text>
			</view>
			<view class="title">健康食谱配搭</view>
			<view class="placeholder"></view>
		</view>
		
		<!-- 游戏开始页面 -->
		<view class="start-page" v-if="gameState === 'start'">
			<image src="/static/images/placeholder.png" mode="aspectFit" class="start-image"></image>
			<view class="start-title">健康食谱配搭挑战</view>
			<view class="start-desc">学习搭配健康食谱，养成良好饮食习惯</view>
			<view class="rules">
				<view class="rules-title">游戏规则</view>
				<view class="rule-item" v-for="(rule, index) in gameRules" :key="index">
					{{index + 1}}. {{rule}}
				</view>
			</view>
			<button class="start-btn" @tap="startGame">开始游戏</button>
		</view>
		
		<!-- 游戏页面 -->
		<view class="game-page" v-else-if="gameState === 'playing'">
			<view class="game-content">
				<view class="food-categories">
					<view 
						class="category-tab" 
						v-for="(category, index) in categories" 
						:key="index"
						:class="{ active: currentCategory === category.type }"
						@tap="selectCategory(category.type)"
					>
						{{category.name}}
					</view>
				</view>
				
				<view class="food-grid">
					<view 
						class="food-item" 
						v-for="(food, index) in filteredFoods" 
						:key="index"
						:class="{ selected: isSelected(food.id) }"
						@tap="toggleFood(food)"
					>
						<image :src="food.image || '/static/images/placeholder.png'" mode="aspectFit" class="food-image"></image>
						<view class="food-name">{{food.name}}</view>
					</view>
				</view>
			</view>
			
			<view class="selected-foods">
				<view class="section-title">已选食物</view>
				<view class="selected-list">
					<view 
						class="selected-item" 
						v-for="(food, index) in selectedFoods" 
						:key="index"
						@tap="removeFood(food)"
					>
						<image :src="food.image || '/static/images/placeholder.png'" mode="aspectFit" class="selected-image"></image>
						<view class="selected-name">{{food.name}}</view>
						<view class="remove-icon">
							<text class="iconfont icon-close"></text>
						</view>
					</view>
					<view class="empty-tip" v-if="selectedFoods.length === 0">
						请从上方选择食物
					</view>
				</view>
			</view>
			
			<view class="action-btns">
				<button 
					class="submit-btn" 
					:class="{ disabled: selectedFoods.length < 4 }"
					@tap="submitRecipe"
				>
					提交食谱
				</button>
			</view>
		</view>
		
		<!-- 结果页面 -->
		<view class="result-page" v-else-if="gameState === 'end'">
			<image src="/static/images/placeholder.png" mode="aspectFit" class="result-image"></image>
			<view class="result-title">食谱评分</view>
			<view class="result-score">{{gameResult.score}}<text class="score-unit">分</text></view>
			
			<view class="result-feedback">
				<view class="feedback-title">评价</view>
				<view class="feedback-content">{{gameResult.feedback}}</view>
			</view>
			
			<view class="selected-recipe">
				<view class="recipe-title">你的食谱</view>
				<view class="recipe-foods">
					<view class="recipe-food" v-for="(food, index) in selectedFoods" :key="index">
						<image :src="food.image || '/static/images/placeholder.png'" mode="aspectFit" class="recipe-food-image"></image>
						<view class="recipe-food-name">{{food.name}}</view>
						<view class="recipe-food-type">{{getCategoryName(food.type)}}</view>
					</view>
				</view>
			</view>
			
			<view class="reward-info" v-if="gameResult.points > 0">
				<view class="reward-text">获得 {{gameResult.points}} 健康积分</view>
				<view class="reward-total">当前总积分: {{gameResult.totalPoints}}</view>
			</view>
			
			<view class="action-btns">
				<button class="action-btn" @tap="restartGame">再玩一次</button>
				<button class="action-btn secondary" @tap="goBack">返回</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed, onMounted } from 'vue'
	import { getRecipeGameData, submitRecipeGame } from '@/common/api/diet.js'
	
	// 游戏状态：start(开始), playing(游戏中), end(结束)
	const gameState = ref('start')
	// 游戏规则
	const gameRules = ref([])
	// 食物列表
	const foods = ref([])
	// 选中的食物
	const selectedFoods = ref([])
	// 当前选中的分类
	const currentCategory = ref('carbs')
	// 游戏结果
	const gameResult = ref({
		score: 0,
		feedback: '',
		points: 0,
		totalPoints: 0
	})
	
	// 食物分类
	const categories = [
		{ type: 'carbs', name: '碳水' },
		{ type: 'protein', name: '蛋白质' },
		{ type: 'vegetable', name: '蔬菜' },
		{ type: 'fat', name: '健康脂肪' }
	]
	
	// 根据当前分类过滤食物
	const filteredFoods = computed(() => {
		return foods.value.filter(food => food.type === currentCategory.value)
	})
	
	// 获取游戏数据
	onMounted(async () => {
		try {
			uni.showLoading({
				title: '加载中...'
			})
			
			const res = await getRecipeGameData()
			
			if (res.code === 0) {
				foods.value = res.data.foods
				gameRules.value = res.data.rules
			} else {
				uni.showToast({
					title: res.message || '加载失败',
					icon: 'none'
				})
			}
		} catch (e) {
			console.error('加载游戏数据失败:', e)
			uni.showToast({
				title: '加载失败',
				icon: 'none'
			})
		} finally {
			uni.hideLoading()
		}
	})
	
	// 开始游戏
	const startGame = () => {
		gameState.value = 'playing'
		selectedFoods.value = []
		currentCategory.value = 'carbs'
	}
	
	// 选择分类
	const selectCategory = (category) => {
		currentCategory.value = category
	}
	
	// 切换食物选择状态
	const toggleFood = (food) => {
		// 检查是否已经选择了同类型的食物
		const existingIndex = selectedFoods.value.findIndex(item => item.type === food.type)
		
		if (existingIndex !== -1) {
			// 如果已经选择了同类型的食物，替换它
			selectedFoods.value.splice(existingIndex, 1, food)
		} else {
			// 否则添加到选中列表
			selectedFoods.value.push(food)
		}
	}
	
	// 移除食物
	const removeFood = (food) => {
		const index = selectedFoods.value.findIndex(item => item.id === food.id)
		if (index !== -1) {
			selectedFoods.value.splice(index, 1)
		}
	}
	
	// 检查食物是否被选中
	const isSelected = (foodId) => {
		return selectedFoods.value.some(food => food.id === foodId)
	}
	
	// 提交食谱
	const submitRecipe = async () => {
		if (selectedFoods.value.length < 4) {
			uni.showToast({
				title: '请选择至少4种食物',
				icon: 'none'
			})
			return
		}
		
		try {
			uni.showLoading({
				title: '提交中...'
			})
			
			const res = await submitRecipeGame({
				selectedFoods: selectedFoods.value.map(food => food.id)
			})
			
			if (res.code === 0) {
				gameResult.value = res.data
				gameState.value = 'end'
			} else {
				uni.showToast({
					title: res.message || '提交失败',
					icon: 'none'
				})
			}
		} catch (e) {
			console.error('提交食谱失败:', e)
			uni.showToast({
				title: '提交失败',
				icon: 'none'
			})
		} finally {
			uni.hideLoading()
		}
	}
	
	// 重新开始游戏
	const restartGame = () => {
		gameState.value = 'start'
	}
	
	// 获取分类名称
	const getCategoryName = (type) => {
		const category = categories.find(cat => cat.type === type)
		return category ? category.name : ''
	}
	
	// 返回上一页
	const goBack = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss">
	.recipe-game-container {
		min-height: 100vh;
		background-color: #f5f7fa;
		
		.game-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			background-color: #fff;
			position: sticky;
			top: 0;
			z-index: 100;
			
			.back-btn {
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				
				.icon-back {
					font-size: 36rpx;
					color: #333;
				}
			}
			
			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}
			
			.placeholder {
				width: 60rpx;
			}
		}
		
		.start-page {
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.start-image {
				width: 300rpx;
				height: 300rpx;
				margin-bottom: 30rpx;
			}
			
			.start-title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 10rpx;
			}
			
			.start-desc {
				font-size: 28rpx;
				color: #666;
				margin-bottom: 40rpx;
			}
			
			.rules {
				width: 100%;
				background-color: #fff;
				border-radius: 12rpx;
				padding: 30rpx;
				margin-bottom: 40rpx;
				
				.rules-title {
					font-size: 30rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 20rpx;
				}
				
				.rule-item {
					font-size: 28rpx;
					color: #666;
					margin-bottom: 10rpx;
					line-height: 1.5;
					
					&:last-child {
						margin-bottom: 0;
					}
				}
			}
			
			.start-btn {
				width: 80%;
				height: 90rpx;
				background-color: #8cc9a1;
				color: #fff;
				font-size: 32rpx;
				border-radius: 45rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		
		.game-page {
			padding-bottom: 180rpx;
			
			.game-content {
				background-color: #fff;
				padding: 20rpx;
				
				.food-categories {
					display: flex;
					justify-content: space-between;
					margin-bottom: 20rpx;
					
					.category-tab {
						flex: 1;
						height: 70rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 28rpx;
						color: #666;
						position: relative;
						
						&.active {
							color: #8cc9a1;
							font-weight: bold;
							
							&::after {
								content: '';
								position: absolute;
								bottom: 0;
								left: 50%;
								transform: translateX(-50%);
								width: 40rpx;
								height: 4rpx;
								background-color: #8cc9a1;
								border-radius: 2rpx;
							}
						}
					}
				}
				
				.food-grid {
					display: flex;
					flex-wrap: wrap;
					padding: 10rpx 0;
					
					.food-item {
						width: 25%;
						padding: 10rpx;
						box-sizing: border-box;
						display: flex;
						flex-direction: column;
						align-items: center;
						
						&.selected {
							.food-image {
								border-color: #8cc9a1;
							}
							
							.food-name {
								color: #8cc9a1;
							}
						}
						
						.food-image {
							width: 120rpx;
							height: 120rpx;
							border-radius: 60rpx;
							background-color: #f8f8f8;
							margin-bottom: 10rpx;
							border: 3rpx solid transparent;
						}
						
						.food-name {
							font-size: 24rpx;
							color: #333;
							text-align: center;
							width: 100%;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}
			}
			
			.selected-foods {
				padding: 20rpx;
				background-color: #fff;
				margin-top: 20rpx;
				
				.section-title {
					font-size: 30rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 20rpx;
				}
				
				.selected-list {
					display: flex;
					flex-wrap: wrap;
					min-height: 160rpx;
					
					.selected-item {
						width: 25%;
						padding: 10rpx;
						box-sizing: border-box;
						display: flex;
						flex-direction: column;
						align-items: center;
						position: relative;
						
						.selected-image {
							width: 100rpx;
							height: 100rpx;
							border-radius: 50rpx;
							background-color: #f8f8f8;
							margin-bottom: 10rpx;
						}
						
						.selected-name {
							font-size: 24rpx;
							color: #333;
							text-align: center;
							width: 100%;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						
						.remove-icon {
							position: absolute;
							top: 0;
							right: 0;
							width: 40rpx;
							height: 40rpx;
							background-color: rgba(0, 0, 0, 0.5);
							border-radius: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
							
							.icon-close {
								font-size: 24rpx;
								color: #fff;
							}
						}
					}
					
					.empty-tip {
						width: 100%;
						height: 160rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 28rpx;
						color: #999;
					}
				}
			}
			
			.action-btns {
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				background-color: #fff;
				padding: 20rpx;
				box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
				
				.submit-btn {
					width: 100%;
					height: 90rpx;
					background-color: #8cc9a1;
					color: #fff;
					font-size: 32rpx;
					border-radius: 45rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					
					&.disabled {
						background-color: #ccc;
					}
				}
			}
		}
		
		.result-page {
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.result-image {
				width: 200rpx;
				height: 200rpx;
				margin-bottom: 20rpx;
			}
			
			.result-title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 10rpx;
			}
			
			.result-score {
				font-size: 72rpx;
				font-weight: bold;
				color: #8cc9a1;
				margin-bottom: 30rpx;
				
				.score-unit {
					font-size: 36rpx;
				}
			}
			
			.result-feedback {
				width: 100%;
				background-color: #fff;
				border-radius: 12rpx;
				padding: 30rpx;
				margin-bottom: 30rpx;
				
				.feedback-title {
					font-size: 30rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 10rpx;
				}
				
				.feedback-content {
					font-size: 28rpx;
					color: #666;
					line-height: 1.5;
				}
			}
			
			.selected-recipe {
				width: 100%;
				background-color: #fff;
				border-radius: 12rpx;
				padding: 30rpx;
				margin-bottom: 30rpx;
				
				.recipe-title {
					font-size: 30rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 20rpx;
				}
				
				.recipe-foods {
					display: flex;
					flex-wrap: wrap;
					
					.recipe-food {
						width: 25%;
						padding: 10rpx;
						box-sizing: border-box;
						display: flex;
						flex-direction: column;
						align-items: center;
						
						.recipe-food-image {
							width: 100rpx;
							height: 100rpx;
							border-radius: 50rpx;
							background-color: #f8f8f8;
							margin-bottom: 10rpx;
						}
						
						.recipe-food-name {
							font-size: 24rpx;
							color: #333;
							text-align: center;
							width: 100%;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							margin-bottom: 5rpx;
						}
						
						.recipe-food-type {
							font-size: 20rpx;
							color: #999;
							background-color: #f5f5f5;
							padding: 4rpx 10rpx;
							border-radius: 10rpx;
						}
					}
				}
			}
			
			.reward-info {
				width: 100%;
				background-color: #fff8e1;
				border-radius: 12rpx;
				padding: 20rpx;
				margin-bottom: 30rpx;
				text-align: center;
				
				.reward-text {
					font-size: 28rpx;
					font-weight: bold;
					color: #ff9800;
					margin-bottom: 5rpx;
				}
				
				.reward-total {
					font-size: 24rpx;
					color: #666;
				}
			}
			
			.action-btns {
				width: 100%;
				display: flex;
				justify-content: space-between;
				
				.action-btn {
					width: 48%;
					height: 90rpx;
					background-color: #8cc9a1;
					color: #fff;
					font-size: 32rpx;
					border-radius: 45rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					
					&.secondary {
						background-color: #f5f5f5;
						color: #666;
					}
				}
			}
		}
	}
</style> 